<template>
	<view class="content">
		<!-- header -->
		<view class="header bg-fff">
			<view class="header-top">
				<image src="/static/logo.png" mode=""></image>
				<view>手机上门维修</view>
				<view class="iconfont user-icon">&#xe655;</view>
			</view>
			<view class="header-swiper">
				<swiper
					class="swiper"
					:indicator-dots="indicatorDots"
					:autoplay="autoplay"
					:interval="interval"
					:duration="duration"
					:indicator-active-color="swiperColor"
					:circular="true"
				>
					<swiper-item v-for="(item, index) in swiperImg" v-bind:key='index'>
						<img :src="'/static/' + item.img" style="width: 100%;" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 功能介绍 -->
		<view class="shop-guild-box bg-fff bg-shadow">
			<navigator url="../select-sidebar/index" open-type="navigate" class="shop-guild">
				<view class="shop-img shop-img-one"></view>
				<p>手机维修</p>
			</navigator >
			<navigator url="../select-sidebar/index" open-type="navigate" class="shop-guild">
				<view class="shop-img shop-img-2"></view>
				<p>平板维修</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="shop-guild">
				<view class="shop-img shop-img-3"></view>
				<p>内存升级</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="shop-guild">
				<view class="shop-img shop-img-4"></view>
				<p>二手回收</p>
			</navigator>
		</view>
		<!-- 故障选择 -->
		<view class="fault-box bg-fff box-margintop bg-shadow">
			<navigator url="../select-sidebar/index" open-type="navigate" class="fault">
				<view class="fault-img"></view>
				<p>快速换屏</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="fault">
				<view class="fault-img fault-2"></view>
				<p>外壳/后壳</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="fault">
				<view class="fault-img fault-3"></view>
				<p>按钮</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="fault">
				<view class="fault-img fault-4"></view>
				<p>声音</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="fault">
				<view class="fault-img fault-5"></view>
				<p>摄影/拍照</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="fault">
				<view class="fault-img fault-6"></view>
				<p>电池不耐用</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="fault">
				<view class="fault-img fault-7"></view>
				<p>主板故障</p>
			</navigator>
			<navigator url="../select-sidebar/index" open-type="navigate" class="fault">
				<view class="fault-img fault-8"></view>
				<p>其他</p>
			</navigator>
		</view>
		<!-- 热门维修 -->
		<view class="hot-box box-margintop bg-fff bg-shadow">
			<view class="hot-title">
				<view class="iconfont hot-icon">
					&#xe66c;
				</view>
				<h3>热门维修</h3>
			</view>
			<view class="hot-list">
				<swiper display-multiple-items="2" previous-margin="20upx" next-margin="30upx">
					<swiper-item>
						<view class="swiper-item">
							<h2>iphone8Plus</h2>
							<view class="weixiu-txt">更换尾插</view>
							<view class="weixiu-rmb">￥199</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<h2>iphone8Plus</h2>
							<view class="weixiu-txt">更换尾插</view>
							<view class="weixiu-rmb">￥199</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<h2>iphone8Plus</h2>
							<view class="weixiu-txt">更换尾插</view>
							<view class="weixiu-rmb">￥199</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<h2>iphone8Plus</h2>
							<view class="weixiu-txt">更换尾插</view>
							<view class="weixiu-rmb">￥199</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 一键下单 -->
		<view class="place-an-order box-margintop bg-fff bg-shadow">
			<navigator url="../order/index" open-type="navigate">
				<view class="place-order-click"></view>
					<view class="place-order-text">
						<h2>一键下单</h2>
						<p>让我们来解决您的烦恼，让您更省心</p>
					</view>
				<view class="place-order-forward"></view>
			</navigator>
		</view>
		<!-- 点评达人 -->
		<view class="comment-on-dare box-margintop bg-fff bg-shadow">
			<view class="hot-title">
				<view class="iconfont hot-icon">
					&#xe66c;
				</view>
				<h3>点评达人</h3>
			</view>
			<view class="comment-list">
				<swiper 
					class="swiper"
					next-margin="200upx"
				>
					<swiper-item>
						<view class="swiper-item">
							<view class="comment">
								<view class="portrait">
									<image src="/static/user.png" mode="widthFix"></image>
								</view>
								<view class="comment-cont">
									<view class="comment-user-time">
										<view class="comment-user">xiaochen</view>
										<view class="comment-time">2019-03-08</view>
									</view>
									<view class="comment-text">
										<text>师傅真的是负责，我说就换块电板就好了，还认真帮我检测，现在完美复活，必须好评,手机拿到手使用起来就跟新的一样超级流畅，维修师傅技术很好看不出维修痕迹，妈妈再也不用担心我的手机内存了</text>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<view class="comment">
								<view class="portrait">
									<image src="/static/user.png" mode="widthFix"></image>
								</view>
								<view class="comment-cont">
									<view class="comment-user-time">
										<view class="comment-user">xiaochen</view>
										<view class="comment-time">2019-03-08</view>
									</view>
									<view class="comment-text">
										<text>师傅真的是负责，我说就换块电板就好了，还认真帮我检测，现在完美复活，必须好评</text>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<view class="comment">
								<view class="portrait">
									<image src="/static/user.png" mode="widthFix"></image>
								</view>
								<view class="comment-cont">
									<view class="comment-user-time">
										<view class="comment-user">xiaochen</view>
										<view class="comment-time">2019-03-08</view>
									</view>
									<view class="comment-text">
										<text>师傅真的是负责，我说就换块电板就好了，还认真帮我检测，现在完美复活，必须好评,手机拿到手使用起来就跟新的一样超级流畅，维修师傅技术很好看不出维修痕迹，妈妈再也不用担心我的手机内存了</text>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<navigator url="../evaluate/index" open-type="navigate" class="comment-more">
				<text>查看更多</text>
				<img src="/static/home_icon_comment@2x.png" />
			</navigator>
		</view>
		<!-- 战略合作伙伴 -->
		<view class="friends box-margintop bg-fff bg-shadow">
			<h4>战略合作伙伴</h4>
			<view class="comment-grid">
				<view class="grid">
					<!-- <img src="/static/liantong.png" alt="liantong" /> -->
					<image src="/static/liantong.png" mode="widthFix"></image>
				</view>
				<view class="grid">
					<!-- <img src="/static/pingancom.png" alt="pingancom" /> -->
					<image src="/static/pingancom.png" mode="widthFix"></image>
				</view>
				<view class="grid">
					<!-- <img src="/static/58com.png" alt="58com" /> -->
					<image src="/static/58com.png" mode="widthFix"></image>
				</view>
				<view class="grid">
					<!-- <img src="/static/pinsheng.png" alt="pinsheng" /> -->
					<image src="/static/pinsheng.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-top">
				<navigator url="../select-sidebar/index" open-type="navigate">关于我们</navigator>
				<navigator url="../select-sidebar/index" open-type="navigate">联系我们</navigator>
				<navigator url="../select-sidebar/index" open-type="navigate">投诉反馈</navigator>
				<navigator url="../select-sidebar/index" open-type="navigate">服务流程</navigator>
			</view>
			<view class="footer-btm">
				<view>
					<view class="footer-text">官网：www.xxx.com</view>
					<view class="footer-text">深圳市某某科技有限公司</view>
				</view>
				<view>
					<view class="footer-text">客服电话：8888-8888</view>
					<view class="footer-text">粤ICP备888888号</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiperImg: [
				{ img: 'home_banner.png' },
				{ img: 'home_banner.png' },
				{ img: 'home_banner.png' }
			],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			swiperColor: '#ffffff'
		}
	},
	onLoad() {    
	},
	methods: {},
	components: {
	}
};
</script>

<style lang="scss">
@import './../../static/iconfont/iconfont.css';

// hot两个相同的样式
.hot-title {
			display: flex;
			justify-content: center;
			height: 50upx;
			line-height: 50upx;
			h3 {
				color: #232323;
				font-weight: 200;
				margin-left: 20upx;
			}
			.hot-icon {
				color: #ff0000;
				font-size: 40upx;
			}
		}

// .hot-box .swiper-item:not(:last-child) {
// 	margin-right: 10upx;
// }

.content {
	.header {
		.header-top {
			display: flex;
			justify-content: space-between;
			height: 90upx;
			line-height: 90upx;
			padding: 0 20upx;
			font-size: 32upx;
			image {
				width: 64upx;
				height: 64upx;
				margin-top: 14upx;
			}
			.user-icon {
				font-size: 52upx;
				color: #333;
			}
		}
		.header-swiper {
			.swiper {
				height: 340upx;
			}
		}
	}
	.shop-guild-box {
		display: flex;
		width: 100%;
		height: 190upx;
		.shop-guild {
			flex: 1;
			text-align: center;
			.shop-img {
				width: 96upx;
				height: 96upx;
				margin: 20upx auto 10upx;
				background: url('~@/static/home-characteristicXuebi.png') no-repeat;
				background-size: cover;
			}
			.shop-img-2 {
				background-position: -96upx 0;
			}
			.shop-img-3 {
				background-position: -192upx 0;
			}
			.shop-img-4 {
				background-position: -288upx 0;
			}
		}
	}
	.fault-box {
		display: flex;
    flex-wrap: wrap;
		width: 100%;
		.fault {
			flex: 0 0 25%;
			padding: 20upx 0;
			text-align: center;
			font-size: 24upx;
			.fault-img {
				width: 64upx;
				height: 64upx;
				margin: 0 auto;
				background: url("") no-repeat;
				background-size: cover;
			}
			.fault-2 {
				background-position: -62upx 0;
			}
			.fault-3 {
				background-position: -126upx 0;
			}
			.fault-4 {
				background-position: -190upx 0;
			}
			.fault-5 {
				background-position: -256upx 0;
			}
			.fault-6 {
				background-position: -320upx 0;
			}
			.fault-7 {
				background-position: -382upx 0;
			}
			.fault-8 {
				background-position: -448upx 0;
			}
		}
	}
	.hot-box {
		width: 100%;
		text-align: center;
		.hot-list {
			width: 100%;
			height: 200upx;
			padding: 4upx 0 16upx;
			swiper {
				height: 100%;
				.swiper-item {
					width: 85%;
					height: 70%;
					border-radius: 10upx;
					padding: 20upx;
					margin: 8upx auto;
					box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
					h2 {
						font-size: 28upx;
						color: #232323;
						font-weight: normal;
					}
					.weixiu-txt {
						font-size: 22upx;
						color: #707070;
						margin: 16upx 0;
						&:before {
							content: '';
							width: 18%;
							height: 2upx;
							position: absolute;
							background: #A0A0A0;
							top: calc(50% - 2upx);
							left: 32upx;
						}
						&:after {
							content: '';
							width: 18%;
							height: 2upx;
							position: absolute;
							background: #A0A0A0;
							top: calc(50% - 2upx);
							right: 32upx;
						}
					}
					.weixiu-rmb {
						font-size: 32upx;
						color: rgba(65,196,215,1);
					}
				}
			}
		}
	}
	.place-an-order {
		height: 140upx;
		navigator {
			display: flex;
			width: 100%;
			height: 100%;
			// justify-content: space-between;
			align-items: center;
			.place-order-click {
				width: 96upx;
				height: 96upx;
				background: url('~@/static/home_btn_down@2x.png') no-repeat;
				background-size: 100%;
				margin-left: 20upx;
			}
			.place-order-text {
				margin-left: 40upx;
				margin-right: auto;
				h2 {
					font-size: 32upx;
					color: #000;
					padding-bottom: 16upx;
				}
				p {
					font-size: 24upx;
				}
			}
			.place-order-forward {
				width: 20upx;
				height: 40upx;
				background: url('~@/static/right-btn.png') no-repeat;
				background-size: 100%;
				margin-right: 30upx;
			}
		}
	}
	.comment-on-dare {
		width: 100%;
		.comment-list {
			.swiper {
				height: 200upx;
				swiper-item {
					margin-right: 20upx;
					.comment {
						display: flex;
						padding: 20upx;
						width: 92%;
						height: 140upx;
						margin: 10upx auto;
						box-shadow: 0px 0px 8upx rgba(0,0,0,0.1);
						.portrait {
							width: 10%;
							height: 100%;
							margin-right: 10upx;
							image {
								width: 100%;
								height: 100%;
							}
						}
						.comment-cont {
							flex: 1;
							color: #707070;
							.comment-user-time {
								display: flex;
								justify-content: space-between;
								font-size: 20upx;
								margin-bottom: 30upx;
							}
							.comment-text {
								font-size: 22upx;
								overflow: hidden;
								line-clamp: 3;
								-webkit-line-clamp: 3;
								text-overflow: ellipsis;
								text-overflow: -o-ellipsis-lastline;
								display: -webkit-box;
								-webkit-box-orient: vertical;
							}
						}
					}
				}
			}
		}
		.comment-more {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 64upx;
			line-height: 64upx;
			font-size: 24upx;
			color: #707070;
			text-align: center;
			img {
				width: 40upx;
				height: 40upx;
			}
		}
	}
	.friends {
		width: 100%;
		text-align: center;
		h4 {
			font-size: 24upx;
			padding: 10upx 0;
		}
		.comment-grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			.grid {
				width: 50%;
				height: 150upx;
				box-sizing: border-box;
				border: 1px solid #f9f9f9;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.footer {
		padding: 40upx 80upx 0;
		.footer-top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20upx;
			navigator {
				color: #232323;
				font-size: 20upx;
			}
		}
		.footer-btm {
			color: #767676;
			font-size: 20upx;
			display: flex;
			justify-content: space-between;
			.footer-text {
				margin-bottom: 20upx;
			}
		}
	}
}
</style>
